Modernising Export for Kiwi Businesses

MPI aims to enhance efficiency for New Zealand exports which accounting for a $57.4 billion of national GDP, they partnered with Deloitte to re-imagine their export certification system and enhance exporter experience. The vision is to replace 3 legacy systems which are costly to maintain or scale and numbers of bespoke Excel sheets with 1 modernised web app.

I was the senior experience designer to co-lead this two-year digital transformation through reimagining a modern digital system to meet export industry's scaling requirements, resulted in building high level of trust with public sector and industry experts.

TL;DR

We are engaged to delivered our futurue-state experience for export business through these core actviitess with MPI:

• Information architecture – Built easy navigation to where information was kept from 3 different systems
• Brand extension – Extended MPI's brand guideline seamlessly in the new app to improve trust and familiarity for customers.
• Design system – Created reusable interface elements that translate coherent brand language, the fundamentals of experience are mobile friendly and accessible by all users, it's also cost effective to scale for supporting future features and mobile experience.
• Detailed design – Designed in collaboration with SMEs, BA to innovate experience that meet exporter requirements across different industries. We led best UX practices conversation through mock ups, analysis, prototypes and co-design workshops.

• Detailed design – Designed in collaboration with SMEs, BA to innovate experience that meet exporter requirements across different industries. We led best UX practices conversation through mock ups, analysis, prototypes and co-design workshops.
• Customer testings – Facilitated [x] customer testings and synthesis over [y] data points with participants from different sectors to validate usability, vision prototypes and riskiest product assumptions and impact product roadmap.
• Scum team delivery – Integrated with agile sprint-based development and ensure quality design handover and consistent communication with dev team and BA. Strike the balance of cost to build, scope and experience to deliver best customer value.

As of the end of 2024, we've released the first version of the app, focused on issuing wine export certificates, a key part of the economy. It’s a huge milestone for us to gain their trust and continue working with them. This will forever change how export businesses operate.

CONTEXT

Export Certification is the final step before a product leaves the country

Here's a high-level export process flow. Typically, a product goes through several steps, starting from source production, processing, and storage. Certification is the final step before the product leaves the country, when the government agency checks the traceability of all previous stages and put a digital stamp on the consignment for overseas shipment. The export certificate can also be used by the importer and customer to verify the source of origin.

PROBLEM

Each commodity has its own export system, making things extremely inefficient, and a lot of exports are still handled manually

Sounds pretty easy, except... there are many systems built a long time ago, and they have become bulky. Each commodity has its own export system, making things extremely inefficient, and a lot of exports are still handled manually. MPI realizes that the old system can no longer meet the scaling requirements of exports, which play an important role in New Zealand's economy.

OBJECTIVES

The future of the certification program is our offering to MPI to reimagine the export certification system and enhance the exporter experience

The goal was to replace 3 legacy systems, which had become costly to maintain and scale, along with multiple bespoke forms and Excel sheets, with a single modernized web app.
The design team led the front-end transformation by simplifying complexities and validating our designs with industry and customer expectations.
Designers were fully embedded in development cycles.

Information Architecture

A well-design IA create cohesive structure, perseveres familiar terms and more importantly easy to navigate

Combing 3 legacy systems and manual paper forms into a unified modern system is highly complex. A well- designed Information Architecture (IA) creates a cohesive structure that preserves familiar terms and functionalities from the current systems. With a 75% success rate in Treejack test with industry users demonstrate the effectiveness of the new IA, which led to successful buy-ins from MPI clients, setting a clear direction for application design. A well-designed IA significantly improves the user experience for exporters nationwide, leading to faster processing times for export certifications.

Brand Extension

BRAND PERSONALITY WORKSHOP

“How do we want to come across” - we showed examples and rationale of good design impact on users

A cohesive design across all MPI digital channels are valuable to brand recognition and trust in the Trade Certification platform. We engaged with client from day one, and we ensure customer and clent are part of that journey for defineing the look and feel. Clients are not designers, The workshop elevates discussions beyond visual applications to focus on desired brand perception, and ensuring the design direction aligns with MP's core values and messaging. Start with existing brand and web guideline we work withclientsusing 5 brand persoabi framework, and for each we find 2-4 examples, brands that client most likely assicate to are immigation new zealand, and other custom service in deloitte portolfio. we chamipon the way of showing example and ralio of good design and impact on differen tyep of users,are backed by examples from past successful Deloitte projects, helps secure client buy-in forward- thinking design approach for MPI.

STYLE TILE

Translating brand personality to a visual reference for the overall look and feel

We use style tile to encapluse ui element like type, coloe and other form compoent. We design 2 versions of style tiles to get early feedback from client before going on with a full commiment on design library or detialed designs.

CONCEPT

Showing off the new homepage idea integrating the new navigation

We want to help customer easlier to see the most importantlanding page of rthei app in futuere state by apply the scattered element from style tie, but also to showcase how the new navigation fit in the new design including mobile design. This give the confidence for client agree with the design apporach and leading to the continuation of more detailed design work.

Mid Level Design

PRODUCT VISION

Look beyond certification, the future manages the product life cycle to build confidence to export

Only verified products can be exports, For example, wine will need to be tested aginst the creitn set by destination markets and bottling process, for meat, will rqeuires trasacblity on from farm, carcus, storage and transfeand current produst reply on 3rd-party software or legacy system to record the eligiblity process (steep learning curve without using a usr menaul). This undoublt addes stress double entry, having to entre everything multple time ofr each export requestnear exporting. Worse, to meeting regulatory requiremnts result request getting rejected by MPI or Non-confomoby importing coutnries
We envsio build a streamline processes allowing user to create prodcust and and kickoff process workflow as they are needed, and the results will be automatially fllow into the export request. better indication on expiry, missing compliance, This doesn't add more work as peole are doing it, A products should have all boxes ticked before being passed on to MPI ceritifiers.

Using mid level design, we can showcase how we simplified the current complications and apply the new workflow. it's a great converstation start we have use with

DEFINE PATHS FOR USERS

Help user navigate between screens, complete day-to-day tasks

How we use form to capture request, add products to export, track processes for traceablity and reeceiveding certificates.

The product is for both new and experience export, the princple is o make the expereine accessible and easy to get started, yet proritise effeciency and delivery value at scale. Wireframe is for internal coomunciatin, how key features are visulasied, how much effor tot build, jira features and priotise them on roadmap

FORM EXPERIENCE DESIGN

As a multi-market multi-commodity compliance solution, form designs should be efficient and scalable

In planning out online compliance form, we identify the need to bild a large set of forms in order, would need a solution that would allow non-developers (such as MPI staff themslveds) to quickly produce forms, workign closely with BA, we differnet set of pick list, and standaris different fields. Looking at differtnet forms, we use afianlity mapping along with the wireframe to show can we can standise terms / form section across different commodityies request

FOCUS ON RELEASE 1

We can't build everything in a short timeframe, so we focused primary wine industry as MVP

How we use form to capture request, add products to export, track processes for traceablity and reeceiveding certificates.

Detailed Design

DETAILED DESIGN WORKSHOP

Facilitating inclusive design process enables effortless team communication, quality of work and better customer outcome

You run design sprints in fornigthly cadence. And our workshop highly collaborative, with designers facilitating conversations to generate ideas and ask critique to move forward towards final designs. We have a solid, repeatable process to prioritise design tasks at the start of each sprint. Each feature undergoes requirements gathering, concepts, design checkpoints, and go over all options and UX best practices throughout detailed design sessions with clients each week.

DESIGN LIBRARY

Enable scalable WCAG compliant digital experience

Accessibility is crucial for the public sector, and our new experience improves inclusivity and satisfaction for all users. Leveraging MUI as a foundation in a cost-effective approach, we used that to custom-build our on-brand design library. Creating reusable components reduces development time and ensures consistency across features, leading to long-term savings and easier product scaling.

DESIGN X SCRUM

Work in aglie

Design is embedded into the agile scrum team and our focus is on delivering tangible and feasiblty customer value every sprint. We also ensure a smooth handoffs to dev team includes all scenarios and error states. ADO makes tracking and communicating design tasks and where it's at a lot easier. Our well-oiled design ops ensures we're always ahead of the development team, better estimating design efforts, supporting developers on front-ends, and having capacity to conduct customer testing.

Usability Testing

DESIGN > INTERVIEW > ITERATE

Confidnece at the programme level beyond usbality, but a belife in the programme success and trust with client

This by no mean is a small part of the programme, but it's mostly owned by Ian due to divide and concequre. This showsbuiness value form the start when we so tree jacks by getting 75% approval rate that starting make programme leader feel confidence in our solution. We can run 4 more round of UT with.... in total we collect 10000 data point, 5 differnt playback to industry user, the governer were sittng in the session with us. Those custoemr voice are so cruicial to give programm the peace of mind on product strategies esapiall for public sectors for justified the funding. We also take swift actions on user feedback.

RUN PARALLEL RESEARCH

Leverage unmorderated remote usablity testing

We adopted Maze to meet intense and various research needs. It seamlessly connet with figma prot, For researchers, it's a hands-off approach—once the test is launched, it's on autopilot.For customers, they can do the test whenever and wherever they want, and it usually takes less time than an interview. It also give us oppotunity to get ahead of the design cycle, as we starting testing what's we've designed or built to later we able to test conept and protoptype has part of the customer input before the deisng si even final. Maze also enabled us for collect survey data, NPS, card sorting, and give us reasy to read reprots like heat map and dropout rate.

Reflections

Design consultants vs In-house design

a large, long-running program is like a marathon. As designers, we need to be ready for the unexpected, espeailly in rough enocmincywhere budge is tight and project are very much deadline driven, the variables that mostly likel ot get chanllenge is the design scope
Teams may have different and changing priorities from time to time, such as pivoting product direction, changes in team resourcing, development capacity, or introducing new constraints.

Provide a precise and thoughtful design option

You might start with a brief from the product lead visualizing how a feature might work. Instead of going with a design exploration,We should approach this with a holistical customer journey view to assess how much customer value it grenerates rather than focusing on isolated, piecemeal features.
My first step is to come up with a high-level problem statement and a set of supporting questions to guide the conversation. During the internal check-ins, which happen three times a week, are essentially for scoping and refining requirements by having in-depth discussions about what we are trying to communicate to the user, different scenarios, rationale, and what we should or should not do.

Delegate technical and analytical questions to different roles, while facilitating the process of getting answers, we own the design process.
Basically, We want to shift from providing multiple design options to delivering one precise solution that aligns with business needs.
This approach allows the team to feel involved in decision-making and more comfortable when sharing solutions with clients.

Start with product owner default and nudge them toward design principles and best practices.

It's key to have a strong relationship and trust with the team, including BA Emily, the product lead, and MPI SMEs. Focus on regular catch-ups and a positive attitude toward solving problems. If we see opportunities for improvement, we could break down the gap (delta) between the baseline and ideal, and work through the details with the team on what we are proposing and why we think it’s valuable.
Some features will have little room for negotiation, so please let them go. It’s the only way for people to take your advice seriously when you actually feel strongly about something.

For this project in particular, you’ll probably land slightly below halfway because we’ve been cornered by cost, time, and effort constraints. but overall it’s a win, and we gain respect from the team for your trusted quality work and resilience.
I think the way it relates to synergy is that we work as a team, and designers use empathy to gel the team together, facilitating valuable conversation, I think that creating this happy positive workplace it’s something experience design like you want to drive and create, leading to a much greater impact than simply passing UI to developers to build.